<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>今日头条热门视频</title>
  </head>
  <style>
    body {
      margin: 0;
    }
    .show-monitor {
      width: 318px;
      height: 600px;
      margin: 50px auto 50px;
    }
    .panel-head {
      display: flex;
      align-items: center;
    }
    .panel-title {
      flex-grow: 1;
    }
    a {
      display: -webkit-box;
    }
  </style>
  <body>
    <div class="show-monitor">
      <div class="panel-head">
        <img
          src=""
          alt=""
          width="22"
        />
        <span class="panel-title">热门视频</span>
        <img
        src=""
        alt=""
        width="16"
        />
        <span>换一换</span>
      </div>
    </div>
  </body>
  <script>
    class Person {
      constructor(name, sex) {
        this.name = name
        this.sex = sex
      }
    }
    class GoodsPerson extends Person {
      constructor(name, sex, age) {
        super(name, sex)
        this.age = age
      }
    }
    var s1 = new Person('hai', 1)
    console.log('s1', s1);
    var s2 = new GoodsPerson('hai', 1, 11)
    console.log('s2', s2);
  </script>
</html>
